<template>
	<view class="page-balance p12">

		<u-navbar title=" " :background="background" :border-bottom="false" :is-back="true" title-color="#fff"
			back-icon-color="#fff">

		</u-navbar>

		<image class="bg-user" src="../../static/image/bg-rent.png" mode="widthFix"></image>
		<view style="position: relative;z-index: 10;">
			<view class="module-card c255">
				<image src="../../static/image/bg-money.png" style="width: 100%;" mode="widthFix"></image>
				<view class="card-content p16 pt20">
					<view class="u-flex u-f-jsb fz12" style="text-align: center;">
						<view>
							总投资金额(元)
							<view class="fz18 mt2">{{dataInfo.investmentAmount || 0}}</view>
						</view>
						<view>
							投资房源数
							<view class="fz18 mt2">{{dataInfo.total || 0}}</view>
						</view>
						<view>
							投资股份数
							<view class="fz18 mt2">{{dataInfo.quantity || 0}}</view>
						</view>
					</view>
					<view class="u-flex u-f-jsb mt30">
						<view class="fz16">
							我的业绩
						</view>
						<!-- <view class="fz12 u-flex u-f-justify">
							查看业绩详情<u-icon class="fz12" name="arrow-right" color="#fff"></u-icon>
						</view> -->
					</view>
					<view class="u-flex u-f-jsb fz12 mt18" style="text-align: center;">
						<view>
							<view class="fz18">{{info.client || 0 }}</view>
							邀请客户数
						</view>
						<view>
							<view class="fz18">{{info.thread || 0 }}</view>
							房源线索数
						</view>
						<view>
							<view class="fz18">{{userInfo.totalRecharge || 0 }}</view>
							累计收入（元）
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white p12 mt12">
				<view class="u-flex u-f-jsb fz16" @click="toPage('/pages/user/balance/index')">
					我的钱包<span class="u-flex u-f-justify fz12">
						查看明细<u-icon class="fz12" name="arrow-right" color="#666"></u-icon>
					</span>
				</view>
				<view class="u-flex u-f-jsb p12 mt10" style="background: #F8F8F8;">
					<view>
						<view class="fz20 c3">{{userInfo.balance || 0}}</view>
						<view class="fz13 c6 mt2">当前余额(元)</view>
					</view>
					<view @click="toPage('/pages/user/balance/withdraw')"
						class="btn-ti u-flex u-f-justify brs3 c255 fz12">提现<u-icon class="fz12 ml3" name="arrow-right"
							color="#fff"></u-icon></view>
				</view>
			</view>
			<view class="u-flex u-f-jsb mt12">
				<view @click="toPage('/pages/house/my')" class="u-f1 bg-white p14 mr6 u-flex"
					style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">
					<image src="../../static/image/ic-fy.png" style="width: 76rpx;height: 76rpx;"></image>
					<view class="u-f1 pl12">
						<view class="fz14 c3">我的房源</view>
						<view class="fz12 c9 mt2">查看房源</view>
					</view>
				</view>
				<view @click="toPage('/pages/invite/index')" class="u-f1 bg-white p14 ml6 u-flex"
					style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">
					<image src="../../static/image/ic-qd.png" style="width: 76rpx;height: 76rpx;"></image>
					<view class="u-f1 pl12">
						<view class="fz14 c3">我的渠道</view>
						<view class="fz12 c9 mt2">查看渠道列表</view>
					</view>
				</view>
			</view>

			<view class="u-flex u-f-jsb fz16 mt20">
				我的物业
				<!-- <span class="u-flex u-f-justify fz12 c9">
					查看收益<u-icon class="fz12" name="arrow-right" color="#999"></u-icon>
				</span> -->
			</view>

			<view class="">

				<view @click="toEdit(item)" v-for="(item,index) in dataList" :key="index">

					<view class="bg-white mt15 p10 u-flex" style="align-items: flex-start;box-shadow: 0px 8px 20px 0px rgba(230,219,209,0.25);">
						<image :src="item.productImage" style="width:200rpx;height: 200rpx;" mode="aspectFill"></image>
						<view class="u-f1 pl10">
							<view class="fz14 u-f-jsb u-flex" style="align-items: flex-start;">{{item.productName}}<span class="status fz12" style="min-width: 100rpx;text-align: right;">{{item.status?'已投资':'待审核'}}</span>
							</view>
							<!-- <view class="fz12 mt4 c9 u-line-1">{{item.productAddress}}</view> -->
							<view class="u-flex fz12 mt12">
								<span class="c6">投资金额</span>
								<span class="color-price ml6" style="color: #FBB03B;">￥{{item.investmentAmount}}</span>
							</view>
							<view class="u-flex fz12 mt5">
								<span class="c6">房源收益</span>
								<span class="color-price ml6">￥{{item.incomeAmount || 0}}</span>
							</view>
							<view class="u-flex fz12 mt5" v-if="item.electronicContract" @click.stop="openFiles(item.electronicContract)">
								<span class="c6">我的合同</span>
								<span class="color-price ml6">查看</span>
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="mt15" >
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
				
			</view>
		</view>

		<u-popup v-model="showTips" :mask-close-able="false" mode="center" border-radius="10" :closeable="false">
			<view style="padding: 40rpx 30rpx;width: 600rpx;">
				<view class="u-flex u-f-justify"> <u-icon class="fz30" name="info-circle-fill" color="#E88B8B"></u-icon>
				</view>
				<view v-if="applyStatus==0">
					<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
						您还不是房东<br /> 无法进行查看！</view>
					<view class="btn-sure fz14" @click="toApply">成为房东</view>
				</view>
				<view v-if="applyStatus==1">
					<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
						您的申请已提交<br /> 请耐心等待！</view>

				</view>
				<view v-if="applyStatus==3">
					<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
						您的申请被驳回</view>
					<view class="btn-sure fz14" @click="toApply">去查看</view>
				</view>
				<!-- <view class="btn-sure btn-sure1 fz14 mt15" @click="toUser">成为房东</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getPlatform
	} from '@/config/util.js'
	export default {
		data() {
			return {
				background: {
					background: 'url(../../static/image/bg-rent.png) no-repeat top'
				},
				applyStatus: 0,
				info: {},
				page:1,
				loadStatus: 'more',
				showTips: false,
				userInfo: {},
				dataList:[],
				dataInfo: {}
			};
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			openFiles(url) {
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url: url, //源文件地址
					success(res) {
						uni.hideLoading()
						uni.openDocument({
							filePath: res.tempFilePath,
							// fileType: "pdf",
							showMenu: true,
							success: function(res) {
								console.log('文件打开成功');
							},
							fail: function(err) {
								console.error('文件打开失败', err);
							}
						})
					},
					complete: () => {

						uni.hideLoading()
					}
				})
			},
			toEdit(item){
				
				uni.navigateTo({
					url: `/pages/product/info?id=${item.propertyId}`
				})
			},
			toApply() {
				uni.navigateTo({
					url: '/pages/landlord/apply'
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			getInfo() {

				this.$api.getNumber({}, res => {
					if (res.code == 200) {
						if (res.data) {

							this.dataInfo = res.data;
						}
					}
				})


				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.userInfo = res.data;

						if (res.data.memberRole != 3) {


							this.$api.getSubmit({
								role: 3
							}, (res) => {
								if (res.code == 200) {

									if (!res.data) {
										this.showTips = true
										this.applyStatus = 0
									} else {

										if (res.data) {

											this.applyStatus = res.data.auditStatus
											if (this.applyStatus != 2) {

												this.showTips = true
											}
										}
									}
								}
							})
						}

					}
				})

				this.$api.getPerFormance({}, (res) => {
					if (res.code == 200) {
						this.info = res.data
					}
				})

			},

			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				let post = {
					pageNo: this.page,
					pageSize: 5
				}
				this.$api.getAllInvestmentProduct(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},

		},
		onShow: function() {
			this.getInfo()
			this.initData()
		}
	};
</script>

<style lang="scss">
	page {
		background: #FEF9F5;
	}

	.bg-user {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;

	}

	.btn {
		background: rgba(242, 70, 70, 0.1);
		color: #F24646;

		height: 86upx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.module-card {
		position: relative;
		z-index: 10;

		.card-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}

	.btn-ti {
		background: #F24646;
		padding: 16rpx 40rpx;
	}


	.btn-sure {

		width: 100%;
		height: 88rpx;
		text-align: center;
		color: #fff;
		line-height: 88rpx;
		background: #F24646;

		&.btn-sure1 {
			background: rgba(242, 70, 70, 0.1);
			color: #F24646;
		}
	}
</style>